class Snake {
  list = []  // unit对象
  direction = "R"  // "L" , "R", "T", "B"
  el = null
  timer
  food

  constructor() {
    this.el = document.querySelector(".snake")

    this.list.push(
      new Unit([2, 0], this.el),
      new Unit([1, 0], this.el),
      new Unit([0, 0], this.el),
    )

    this.timer = setInterval(() => {
      this.move()
      this.draw()
    }, 300)
    this.registerEvent()
    this.createFood()
  }

  refresh() {
    clearInterval(this.timer)
    this.move()
    this.draw()
    this.timer = setInterval(() => {
      this.move()
      this.draw()
    }, 300)
  }

  registerEvent() {

    window.addEventListener("keydown", evt => {
      const { key } = evt   // const key = evt.key
      const direction = this.direction
      if (key === "ArrowRight" && direction !== "L") {
        this.direction = "R"
        this.refresh()
      } else if (key === "ArrowLeft" && direction !== "R"){
        this.direction = "L"
        this.refresh()
      }
      else if (key === "ArrowUp" && direction !== "B"){
        this.direction = "T"
        this.refresh()
      }
      else if (key === "ArrowDown" && direction !== "T"){
        this.direction = "B"
        this.refresh()
      }
    })
  }

  move() {
    let tempPosition = []
    this.list.forEach((unit, index) => {
      if (index === 0) {
        // 获取下个时间点的position
        const [x, y] = unit.position  // 解构赋值
        tempPosition = [x, y]

        let position = []
        const direction = this.direction
        if (direction === "R"){
          position = [x+1, y]
        }
        if (direction === "L"){
          position = [x-1, y]
        }
        if (direction === "B"){
          position = [x, y + 1]
        }
        if (direction === "T"){
          position = [x, y - 1]
        }
        unit.move(position)
      } else {
        const ret = unit.position  // 这是本轮自己的position
        unit.move(tempPosition)  // 这是上轮的position
        tempPosition = ret  // 把自己的position, 当做下轮的position
      }
    })
    const first = this.list[0]
    if (first.position[0] === this.food.position[0] && first.position[1] === this.food.position[1]) {
      this.list.push(new Unit(tempPosition, this.el))
      this.createFood()
    }
  }

  draw() {
    this.list.forEach(unit => unit.draw())
  }

  createFood() {
    // 产生一个实物 [0, 29]
    if (this.food) {
      this.el.removeChild(this.food.el)
    }
    const x = parseInt(Math.random() * 30)
    const y = parseInt(Math.random() * 30)
    const flag = this.list.some(item => item.position[0] === x && item.position[1] === y)
    if (flag) {
      this.createFood()
      return
    }
    this.food = new Unit([x, y], this.el)
    this.food.el.style.backgroundColor = "red"
    this.food.draw()
  }
}

class Unit {
  position = [0 ,0]
  container = null
  el

  constructor(position, container) {
    this.position = position
    this.container = container  // 需要挂载的parent

    const el = document.createElement("div")
    el.className = "unit"
    this.el = el
  }

  move (position) {
    this.position = position
  }

  draw() {  // 画, 把抽象的Unit变成一个dom
    this.el.style.left = this.position[0] * 10 + "px"
    this.el.style.top = this.position[1] * 10 + "px"
    this.container.append(this.el)
  }
}

const snake = new Snake()
